<template>
  <base-modal
    :show.sync="dialogShow"
    :title="(info && info.no) || $t('common.base.logisticsNo')"
    @close="changelClose"
  >
    <div class="logistics-container">
      <div class="timeline-wrap" v-loading="loading">
        <div
          class="timeline-item"
          :class="{ active: index === 0 }"
          v-for="(item, index) of detailList"
          :key="item.time"
        >
          <div class="timeline-item-time">
            <span>{{ item.time }}</span>
          </div>
          <div class="timeline-item-content">
            <div class="timeline-item__tail"></div>
            <div class="timeline-item__node">
              <i class="iconfont icon-yitongguo" v-if="index === 0"></i>
              <i class="iconfont icon-up-circle" v-else></i>
            </div>
            <div class="timeline-item__status">{{ item.status }}</div>
          </div>
        </div>
      </div>
      <div class="nothing" v-if="!detailList.length && !loading">
        <img :src="nothingImage" alt="" />
        <div class="tip">{{$t('common.form.tip.logistics.tips6')}}</div>
      </div>
    </div>
    
    <template slot="footer">
      <el-button type="primary" @click.native="changelClose">{{$t('common.base.close')}}</el-button>
    </template>
    
  </base-modal>
</template>

<script>
import { getLogisticsDetail } from '@src/api/FieldApi';
import { getOssUrl } from '@src/util/assets'
const nothingImage = getOssUrl('/form/form-logistics-nothing.png')

export default {
  name: 'logistics-dialog',
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
    // mode: {
    //   type: String,
    //   default: ''
    // },
    // bizId: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      nothingImage,
      dialogShow:false,
      loading: false, // 页面加载等待
      detail: null, // 物流详情
      detailList: [], // 物流详情列表
    };
  },
  watch: {
    dialogShow(isShow) {
      if (isShow) {
        this.open();
      }
    },
  },
  methods: {
    // 点击关闭
    changelClose() {
      this.dialogShow = false
      this.$emit('close');
    },

    // 打开事件
    open() {
      this.fetchDetail();
    },

    // 查询物流信息
    async fetchDetail() {
      try {
        const { type, no, phone } = this.info;
        this.loading = true;
        this.detailList = [];
        
        
        const detail = await getLogisticsDetail({ 
          no: type === 'SFEXPRESS' ? `${no}:${phone}` : no, 
          type,
        });
        
        if (!detail) throw new Error(this.$t('common.form.tip.logistics.tips7'));
        this.detail = detail;
        this.detailList = detail.list;
      } catch (error) {
        this.$emit('error', error); // 往上传递失败事件
        // this.$message.error((error && error.message) || '物流获取失败');
        // this.changelClose();
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scope>
.logistics-container {
  padding: 30px 20px;
  min-height: 300px;
  .timeline-wrap {
    overflow-y: auto;
    font-size: 14px;
    .timeline-item {
      padding-bottom: 10px;
      width: 100%;
      display: flex;
      &.active {
        color: $color-primary;
      }
      &:not(:last-of-type) {
        .timeline-item-content {
          border-left: 1px solid #eee;
        }
      }
      .timeline-item-time {
        width: 150px;
        flex: 0 0 95px;
        padding: 0 0 20px 0;
        font-size: 14px;
        span {
          display: flex;
          max-width: 75px;
        }
      }
      .timeline-item-content {
        position: relative;
        padding: 0 20px 20px 20px;
        &::before {
          position: absolute;
          top: 0;
          left: -5px;
        }
        .timeline-item__node {
          position: absolute;
          left: 0;
          top: -2px;
          background: white;
          transform: translateX(-50%);
        }
        .timeline-item-status {
          flex: 1;
        }
      }
    }
  }
  .nothing {
    text-align: center;
    img {
      max-width: 260px;
    }
    .tip {
      margin-top: 30px;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
